import React, { useState, useEffect } from 'react'
import '../styles/MessagePopup.scss' // 引入CSS文件

const MessagePopup = ({ message, show, onClose }) => {
  const [animationClass, setAnimationClass] = useState('');

  useEffect(() => {
    if (show) {
      setAnimationClass('visible');
      const timer = setTimeout(() => {
        setAnimationClass('fading-out');
      }, 2000); // 消息显示2秒后开始淡出动画
      return () => clearTimeout(timer);
    }
  }, [show]);

  useEffect(() => {
    if (animationClass === 'fading-out' && !show) {
      const timer = setTimeout(() => {
        setAnimationClass(''); // 动画完成后重置类名
        onClose && onClose(); // 调用外部传入的onClose函数
      }, 1000); // 确保淡出动画完成后调用onClose
    }
  }, [animationClass, show, onClose]);

  return (
    <div className={`message-popup ${animationClass}`}>
      {message}
    </div>
  );
};

export default MessagePopup;